<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.父元素和子元素宽高不固定,如何实现子元素水平垂直居中</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .father_box {
        width: 500px;
        height: 500px;
        background-color: aqua;
        position:absolute;
        /* position:static; 除静态定位外都可以 */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .son_box {
        width: 300px;
        height: 300px;
        background-color: rgb(14, 216, 51);
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        line-height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<body>
    <div class="father_box">
        <div class="son_box">
            水平垂直居中
        </div>
    </div>
</body>
<!-- 父元素和子元素宽高不固定,如何实现水平垂直居中?
方法一:利用弹性盒模型(只给父级设置样式) 

父级元素
display: flex;  //把父级变成弹性盒
justify-content: center; //让子元素在水平方向上居中分布
align-items: center;  //让子元素在垂直方向上居中分布

方法二:利用弹性盒模型(给父级和子级设置样式)  

父级元素
display: flex;
子级元素
margin: auto;

方法三:利用定位属性(position)+位移属性(transform)

relative相对定位会在标准流当中占位置;

absolute绝对定位不会在标准流当中占位置;

父级元素
position: relative;
子级元素
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

注意:这里不一定需要子绝父相,必要情景下,除了(static)静态定位外都可以使用,但这样做会产生额外的问题(脱离文档流)

总结:把脱离文档流的元素放在不脱离文档流(需要占位置)的元素上就要用“子绝父相”
-->




</html>